<template>
  <li class="business-item" @click="enterBusiness">
    <div class="item-left">
      <img :src="img" alt="商家图片" />
    </div>
    <div class="item-right">
      <h3 class="item-name">{{ name }}</h3>
      <p class="item-info">
        起送价 ¥{{ startPrice }} | 配送费 ¥{{ deliveryFee }}
      </p>
      <p class="item-desc">{{ description }}</p>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    img: { type: String, required: true },
    name: { type: String, required: true },
    startPrice: { type: Number, required: true },
    deliveryFee: { type: Number, required: true },
    description: { type: String, required: true }
  },
  methods: {
    enterBusiness() {
      this.$emit('enter-business')
    }
  }
}
</script>

<style scoped>
.business-item {
  display: flex;
  padding: 3vw;
}
.item-left {
  width: 25vw;
}
.item-left img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.item-right {
  flex: 1;
  padding-left: 3vw;
}
.item-name {
  font-size: 4vw;
  margin: 0 0 2vw;
  color: #333;
}
.item-info {
  font-size: 3.2vw;
  color: #666;
  margin: 0 0 2vw;
}
.item-desc {
  font-size: 3.2vw;
  color: #999;
  margin: 0;
}
</style>